<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="search-wrapper">
      <el-row class="search-row">
        <el-col :span="8" :offset="8">
          <el-button
            class="search-button"
            icon="el-icon-search"
            @click="showSearchBox"
            >点击这里搜索培训</el-button>
        </el-col>
      </el-row>
      <el-dialog title="搜索培训" :visible.sync="showDialog">
        <el-form :inline="true" :model="listQuery">
          <el-form-item label="培训类型">
            <el-select v-model="listQuery.type" placeholder="请选择" clearable>
              <el-option label="运动健康" value="sport"></el-option>
              <el-option label="饮食健康" value="diet"></el-option>
              <el-option label="心理健康" value="mental"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="培训主题">
            <el-input v-model="listQuery.title" placeholder="请输入培训主题" clearable></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="handleFilter">搜索</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 新增按钮 -->
    <div class="add-button-container">
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增培训</el-button>
    </div>

    <!-- 培训卡片网格 -->
    <div class="grid-container">
      <div v-for="(item, index) in list" :key="index" class="grid-item">
        <div class="card">
          <div class="card-header">
            <el-tag :type="getTagType(item.type)">{{ getTypeName(item.type) }}</el-tag>
            <h3>{{ item.title }}</h3>
          </div>
          <div class="card-content">
            <p><i class="el-icon-user"></i> 培训讲师：{{ item.trainer }}</p>
            <p><i class="el-icon-time"></i> 培训时间：{{ item.trainingTime }}</p>
            <p><i class="el-icon-location"></i> 培训地点：{{ item.location }}</p>
            <p class="content-preview"><i class="el-icon-document"></i> 培训内容：{{ item.content }}</p>
          </div>
          <div class="card-footer">
            <el-button size="mini" type="success" @click="handleView(item)">查看详情</el-button>
            <el-button size="mini" type="primary" @click="handleUpdate(item)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(item)">删除</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页 -->
    <el-pagination
      v-show="total>0"
      :current-page="listQuery.page"
      :page-sizes="[9, 18, 27, 36]"
      :page-size="listQuery.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      class="pagination"
    />

    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="dialogStatus === 'create' ? '新增培训' : '编辑培训'" :visible.sync="dialogVisible">
      <el-form ref="dataForm" :model="temp" :rules="rules" label-position="right" label-width="120px">
        <el-form-item label="培训类型" prop="type">
          <el-select v-model="temp.type" placeholder="请选择">
            <el-option label="运动健康" value="sport"></el-option>
            <el-option label="饮食健康" value="diet"></el-option>
            <el-option label="心理健康" value="mental"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训主题" prop="title">
          <el-input v-model="temp.title"></el-input>
        </el-form-item>
        <el-form-item label="培训讲师" prop="trainer">
          <el-input v-model="temp.trainer"></el-input>
        </el-form-item>
        <el-form-item label="培训时间" prop="trainingTime">
          <el-date-picker
            v-model="temp.trainingTime"
            type="datetime"
            placeholder="请选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="培训地点" prop="location">
          <el-input v-model="temp.location"></el-input>
        </el-form-item>
        <el-form-item label="培训内容" prop="content">
          <el-input type="textarea" v-model="temp.content" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确定</el-button>
      </div>
    </el-dialog>

    <!-- 查看详情弹窗 -->
    <el-dialog title="培训详情" :visible.sync="viewDialogVisible" width="70%" class="detail-dialog">
      <div class="detail-container">
        <div class="detail-header">
          <el-tag :type="getTagType(viewData.type)" size="large">{{ getTypeName(viewData.type) }}</el-tag>
          <h2>{{ viewData.title }}</h2>
        </div>
        <div class="info-row">
          <div class="info-item">
            <i class="el-icon-user"></i>
            <span>培训讲师：{{ viewData.trainer }}</span>
          </div>
          <div class="info-item">
            <i class="el-icon-time"></i>
            <span>培训时间：{{ viewData.trainingTime }}</span>
          </div>
          <div class="info-item">
            <i class="el-icon-location"></i>
            <span>培训地点：{{ viewData.location }}</span>
          </div>
        </div>
        <div class="content-section">
          <h3><i class="el-icon-document"></i> 培训内容</h3>
          <div class="content-box">{{ viewData.content }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import request from '@/utils/request'

export default {
  name: 'HealthEducation',
  filters: {
    parseTime
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: false,
      showDialog: false,
      listQuery: {
        page: 1,
        pageSize: 9,
        type: undefined,
        title: undefined
      },
      dialogVisible: false,
      viewDialogVisible: false,
      dialogStatus: '',
      temp: {
        id: undefined,
        type: '',
        title: '',
        trainer: '',
        trainingTime: '',
        location: '',
        content: ''
      },
      viewData: {},
      rules: {
        type: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        title: [{ required: true, message: '请输入培训主题', trigger: 'blur' }],
        trainer: [{ required: true, message: '请输入培训讲师', trigger: 'blur' }],
        trainingTime: [{ required: true, message: '请选择培训时间', trigger: 'change' }],
        location: [{ required: true, message: '请输入培训地点', trigger: 'blur' }],
        content: [{ required: true, message: '请输入培训内容', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    showSearchBox() {
      this.showDialog = true
    },
    closeDialog() {
      this.showDialog = false
    },
    getTagType(type) {
      const types = {
        sport: 'success',
        diet: 'warning',
        mental: 'info'
      }
      return types[type] || ''
    },
    getTypeName(type) {
      const types = {
        sport: '运动健康',
        diet: '饮食健康',
        mental: '心理健康'
      }
      return types[type] || type
    },
    async getList() {
      this.listLoading = true
      try {
        const { data } = await request({
          url: '/health/education/list',
          method: 'get',
          params: this.listQuery
        })
        this.list = data.records || []
        this.total = data.total || 0
      } catch (error) {
        console.error('获取列表失败:', error)
        this.list = []
        this.total = 0
      }
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.page = 1
      this.showDialog = false
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        type: '',
        title: '',
        trainer: '',
        trainingTime: '',
        location: '',
        content: ''
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleView(row) {
      this.viewData = Object.assign({}, row)
      this.viewDialogVisible = true
    },
    handleUpdate(row) {
      this.temp = Object.assign({}, row)
      this.dialogStatus = 'update'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    async createData() {
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          try {
            await request({
              url: '/health/education/add',
              method: 'post',
              data: this.temp
            })
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '创建成功'
            })
            this.getList()
          } catch (error) {
            console.error('创建失败:', error)
          }
        }
      })
    },
    async updateData() {
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          try {
            await request({
              url: '/health/education/update',
              method: 'put',
              data: this.temp
            })
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '更新成功'
            })
            this.getList()
          } catch (error) {
            console.error('更新失败:', error)
          }
        }
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除该培训记录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await request({
            url: `/health/education/delete/${row.id}`,
            method: 'delete'
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        } catch (error) {
          console.error('删除失败:', error)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.search-wrapper {
  margin-bottom: 20px;
  .search-row {
    text-align: center;
  }
  .search-button {
    width: 200px;
    height: 40px;
    font-size: 16px;
  }
}

.add-button-container {
  margin-bottom: 20px;
  text-align: right;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.grid-item {
  .card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    .card-header {
      padding: 15px;
      border-bottom: 1px solid #ebeef5;
      
      .el-tag {
        margin-bottom: 10px;
      }
      
      h3 {
        margin: 0;
        font-size: 18px;
        color: #303133;
      }
    }

    .card-content {
      padding: 15px;
      
      p {
        margin: 8px 0;
        color: #606266;
        
        i {
          margin-right: 5px;
        }
      }
      
      .content-preview {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .card-footer {
      padding: 15px;
      border-top: 1px solid #ebeef5;
      text-align: right;
      
      .el-button {
        margin-left: 8px;
      }
    }
  }
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.detail-dialog {
  .detail-container {
    .detail-header {
      text-align: center;
      margin-bottom: 30px;
      
      .el-tag {
        margin-bottom: 15px;
      }
      
      h2 {
        margin: 0;
        color: #303133;
      }
    }

    .info-row {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin-bottom: 30px;
      
      .info-item {
        margin: 10px;
        color: #606266;
        
        i {
          margin-right: 5px;
          color: #409EFF;
        }
      }
    }

    .content-section {
      margin-top: 30px;
      
      h3 {
        color: #303133;
        margin-bottom: 15px;
        
        i {
          margin-right: 5px;
          color: #409EFF;
        }
      }
      
      .content-box {
        background-color: #f5f7fa;
        border-radius: 4px;
        padding: 20px;
        
        p {
          margin: 0;
          line-height: 1.6;
          color: #606266;
        }
      }
    }
  }
}
</style> 